<div class="container" style="width:100%;">
    <div class="row" style="border:1px solid #999999;background-color:#ffffff;">
        <!--切换条件-->
        <!--商户选择-->

        <div class="col-md-12" style="font-size:18px;">
            <div class="col-md-12" style="height:20px;"></div>
            <div class="col-md-12" style="height:20px;"></div>


            <form action="" class="form-commonsearch" method="post">


            <div class="col-md-12 " id="is_show2" align="center">


                    <span style="font-size: 15px">选择时间 : </span><input type="datetime" data-rule="required"  style="width:20%; display: inline-block;"  class="form-control datetimepicker" name="s" value="{$Request.param.s}" placeholder="开始时间" id="s" data-date-format="YYYY-MM-DD" />
                    --
                    <input type="datetime" data-rule="required"  style="width:20%; display: inline-block; " class="form-control datetimepicker" name="e" value="{$Request.param.e}" placeholder="结束时间" id="e" data-date-format="YYYY-MM-DD" />

                <button class="btn btn-default" type="submit" name="commonSearch" title="搜索"><i class="glyphicon glyphicon-search"></i></button>
            </div>
            </form>
            <div class="col-md-12" style="height:100px;"></div>

            <div class="col-md-10" id="echart" style="height:600px;">
                <!--放置图表-->
            </div>
            <div class="col-md-12" style="height:100px;">
                <p align="center">预约参观人数：{$visit.views}    &nbsp;&nbsp;&nbsp;     实际参观人数：{$visit.actual_views}        &nbsp;&nbsp;&nbsp;         参观率： {$visit.visit_lv}%       </p>
                <p></p>
                <p></p>
            </div>


        </div>
    </div>
</div>
<script src="/lib/jquery/1.9.1/jquery.min.js"></script>
<script src="/lib/echarts/3.4.0/echarts.common.min.js"></script>
<!--<script src="/assets/js/bootstrap-table-commonsearch.js"></script>-->
<script>
    var myChart3 = echarts.init(document.getElementById('echart'));

    option = {
        title : {
            text: '参观人数统计图',

        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['预约','实际到场']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }
        ],
        yAxis : [
            {
                type : 'value',
                name: "人数",
            }
        ],
        series : [
            {
                name:'预计预约',
                type:'bar',
                data:[{$ydata}],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'实际预约',
                type:'bar',
                data:[{$ddata}],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };

    myChart3.setOption(option)

</script>
